<template>
  <div class="appBox">
    <table class="appBox-table">
      <ul>
        <li>
          <div>浏览量(PV)</div>
          <div>{{retMap.pv}}</div>
          <div>
            日
            <div :class="[retMap.uv_per>= 0 ? 'up':'down']"></div>
            {{retMap.pv_per}}%
          </div>
        </li>
        <li>
          <div>独立用户(UV)</div>
          <div>{{retMap.uv}}</div>
          <div>
            日
            <div :class="[retMap.uv_per>= 0 ? 'up':'down']"></div>
            {{retMap.uv_per}}%
          </div>
        </li>
        <li>
          <div>访问次数(VV)</div>
          <div>{{retMap.vv}}</div>
          <div>
            日
            <div :class="[retMap.uv_per>= 0 ? 'up':'down']"></div>
            {{retMap.vv_per}}%
          </div>
        </li>
        <li>
          <div>独立IP</div>
          <div>{{retMap.ip}}</div>
          <div>
            日
            <div :class="[retMap.uv_per>= 0 ? 'up':'down']"></div>
            {{retMap.ip_per}}%
          </div>
        </li>
      </ul>
    </table>
  </div>
</template>
<script>
import apis from "../../public/api";

export default {
  name: "appBox",
  data() {
    return {
      retMap: {}
    };
  },
  methods: {},
  mounted() {
    this.axios
      .get(apis.queryZXBriefData, {
        //api.sq  为 api.js 文件夹中，名称为 sq 的接口路径
        params: {}
      })
      .then(res => {
        //此处要使用箭头函数，this指向才正确
        this.retMap = res.data.result;
      })
      .catch(function(error) {
        alert(error);
      });
  }
};
</script>
<style lang="less">
.appBox {
  width: 518px;
  height: 250px;
  margin: 39px auto 0;
  padding-top: 18px;
  background: url(../assets/img/border3-2.gif) no-repeat center center / 100%
    100%;
  &-title {
    padding-left: 17px;
    font-size: 18px !important;
    font-weight: 600;
    margin-bottom: 20px !important;
  }
  &-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    font-size: 14px;
    // background-color: #0b1848;
    margin-top: 53px;
    ul {
      display: flex;
      li {
        height: 154px;
        padding: 25px 17px 0;
        margin-left: 16px;
        color: #f2f3f7;
        width: 112px;
        background: url(../assets/img/border3-3.png) no-repeat center center /
          100% 100%;
        div:nth-child(1) {
          color: #50FCFC;
          font-size: 12px;
        }
        div:nth-child(2) {
          font-size: 24px;
          margin: 20px 0;
          color: #FF9E17;
        }
        div:nth-child(3) {
          font-size: 12px;
          color: #D9FAFA;
        }
      }
    }
  }
}
.up {
  display: inline-block;
  background: url(../assets/img/up.png) no-repeat center center / 100% 100%;
  width: 15px;
  height: 10px;
  margin: 0 2px;
}
.down {
  display: inline-block;
  background: url(../assets/img/down.png) no-repeat center center / 100% 100%;
  width: 15px;
  height: 10px;
  margin: 0 2px;
}
</style>
